@import "tailwindcss";

@import "./css/tw-theme.css" layer(theme);
@import "./css/tw-preflight.css" layer(base);

@config "../../tailwind.config.js";
/*tailwind4引入插件语法
@plugin "@nauverse/tailwind-dot-grid-backgrounds";*/
@import "tailwindcss-animated";

@layer tailwind-base {
    button {
        @apply cursor-pointer;
    }
}

@layer tailwind-utilities {
    /*-------------ant样式-------------*/
    /*todo ant样式冲突*/
    .anticon svg {
        display: block !important; /* 1 */
    }
}

@layer tailwind-components {
    .bot-main-mt {
        @apply mt-4 md:mt-6 lg:mt-8
    }

    .bot-main-py {
        @apply py-4 lg:py-6 xl:py-8
    }

    .bot-main-px {
        @apply px-4 lg:px-6 xl:px-8
    }

    .bot-main-gap {
        @apply gap-2 md:gap-4 lg:gap-4 xl:gap-6
    }

    .bot-main-transition {
        @apply transition duration-500
    }

    .bot-main-rounded {
        @apply rounded-lg
    }

    .bot-main-border {
        @apply border border-slate-200/70 dark:border-slate-800
    }

    .bot-main-border-r {
        @apply border-r  border-slate-200/70 dark:border-slate-800
    }

    .bot-main-border-b {
        @apply border-b  border-slate-200/70 dark:border-slate-800
    }


    .bot-main-border-l {
        @apply border-l  border-slate-200/70 dark:border-slate-800
    }

    .bot-main-svg1 {
        @apply w-5 h-5 lg:w-6 lg:h-6
    }

    .bot-main-svg {
        @apply w-6 h-6 lg:w-5 lg:h-5
    }

    .bot-ui-editor-svg {
        @apply w-[20px] h-[20px]
    }

    /*
      进入和离开动画可以使用不同
      持续时间和速度曲线。
    */
    .fade-enter-active
    {
        transition: opacity 0.6s ease;
    }

    .fade-enter-from{
        opacity: 0;
    }

}

html {
    @apply text-[0.9rem] text-slate-800 tracking-wide;
}

/*todo 解决tailwindcss和富文本中的标题样式冲突问题*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: revert;
    font-weight: revert;
}

/*antvue*/
/*弹出框全屏幕*/
.full-modal {
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
    }
    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
    }
    .ant-modal-body {
        flex: 1;
    }
}


/*app样式*/
#appHeader {
    height: 72px;
}

[data-bs-aside="true"] {
    #appLeftSide {
        width: 300px !important;
    }
    #appContentWrap {
        padding-left: 300px;
    }
    #appContentHeaderWrap {
        padding-left: 300px;
    }
}

[data-bs-aside="false"] {
    #appLeftSide {
        width: 100px !important;
    }
    #appContentWrap {
        padding-left: 100px;
    }
    #appContentHeaderWrap {
        padding-left: 100px;
    }
}

